<template>
	<view class="coupon-box">


		<view class="share-wx" v-if="shareWXShow">
			<img @click="closeShareWX" class="share-wx-close"
				src="https://file.casugn.com/storecompcard//tI3aJkYKBbJ086237cd202028819e61d474819bc823e_1660276776127.png"
				alt="">
			<!--  v-if="!friendSelectShow" -->
			<view class="share-img">
				<img :src="goodsImage" alt="">
			</view>
			<view class="share-send">

				<button openType="share" class="shareBtn">

					<view class="">
						<img src="https://file.casugn.com/storecompcard//QSDskyI2jhEt33e5e495cefaf2ee85a8415d3a047ff6_1658829757449.png"
							alt="">
					</view>
					<view class="">
						分享到微信
					</view>

				</button>
				<!-- <u-button color="#fe3030"  text="发送" @click="sendText"></u-button> -->
			</view>
		</view>

		<!-- 同步优惠券 -->
		<!-- 	<view class="">
			<u-button type="primary" text="同步优惠券" @click="synClick"></u-button>
		</view> -->
		<!-- <view class="share-cicle" @click="shareClick" v-if="shareShow&&isMyself">
			<view class="share-img">
				<img src="https://file.casugn.com/storecompcard//3FhE0nkJKwzX2fa9e3b3c0634cb782f379f94c6014cb_1667195482394.png"
					alt="">
			</view>
			<text>一键分享</text>
		</view> -->
		<!-- @click="synClick" -->
		<view class="add-cicle" v-if="shareDisabled&&isMyself">
			<view class="add-img">
				<u-button color="#276AEE" @click="synClick" :throttleTime="500" text="领券" type="primary">
				</u-button>
			</view>
			<view class="add-img" v-if="shareShow">
				<u-button color="#276AEE" @click="shareClick" :throttleTime="500" :plain="true" text="批量分享" type="primary">
				</u-button>
			</view>


		</view>

		<view class="navbar">
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="statusMenuClick(1)">
				未使用
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="statusMenuClick(2)">
				已使用
			</view>
			<view class="nav-item" :class="{current: filterIndex === 3}" @click="statusMenuClick(3)">
				已失效
			</view>
		</view>




		<view class="created-box" @click="toCreateCoupon">
			<view class="created-cicle">
				<img src="https://file.casugn.com/storecompcard//YZKZqyCI08Zuea1756ed7e6fae46196df21a55678bd1_1681713360424.png"
					alt="">
			</view>

			<view class="created-btn">
				生成优惠券
			</view>

		</view>
		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<!-- 数据为空 -->
			<view class="no-coupon" v-if="!listInfo.length && firstLoad">
				<img src="https://file.casugn.com/storecompcard/temp/空页面@2x(5)_1681113684123.png" alt="">
				<view class="no-coupon-name">
					暂无优惠券
				</view>
			</view>
			<!-- 分享多个 -->
			<!--  @tap="checkCoupon(index,item)" -->
			<view class="list-box" v-for="(item,index) in listInfo" :key="index" @tap="checkCoupon(index,item)">
				<view class="coupon-pick">
					<u-icon name="checkmark-circle-fill" color="#276AEE " size="50" v-if="item.bOn"></u-icon>
				</view>
				<view class="list-top">
					<!-- 金钱部分 -->
					<view class="list-money">
						<view class="lt-box-t">
							¥ <text class="">{{item.publishValue}}</text>
						</view>
						<view class="lt-box-m">
						 {{item.couponTypeValue||''}}
						</view>
					</view>
					<!-- 内容部分 -->
					<view class="list-md">
						<view class="list-md-title nowrap-ellipsis">
							{{item.useType==1?'店铺券':'商品券'}} ({{item.couponName||''}})
						</view>
						<view class="list-md-content">
							{{item.couponContent}}
						</view>
						<view class="list-md-date">
							有效期至{{item.effectiveEnd}}
						</view>
					</view>
				</view>
				<view class="list-line">

				</view>
				<view class="list-bottom">
					适用规则:{{item.description}}
				</view>


				<view class="list-r-btn" v-if="filterIndex ==1&&!item.bOn">
					<view class="list-to-share">
						<u-button type="primary" shape="circle" size="mini" color="#F53F3F" text="去分享"
							@tap.stop="toShare(item,index)" v-if="shareDisabled"></u-button>
					</view>
					<view class="list-to-use">
						<u-button type="primary" shape="circle" size="mini" :hairline="true" :plain="true"
							color="#F53F3F" text="去使用" @tap.stop="toUseMethod(item,index)" v-if="shareDisabled">
						</u-button>
					</view>
				</view>
				<!-- 已使用图片 -->
				<view class="list-r-used" v-if="filterIndex ==2">
					<img src="https://file.casugn.com/storecompcard//SCofUR6qUVxL4ef37c6fcecce3057d931d0abe5c373f_1681692556321.png"
						alt="">
				</view>
				<!-- 已失效图片 -->
				<view class="list-r-used" v-if="filterIndex ==3">
					<img src="https://file.casugn.com/storecompcard//94agHBR3x9fkc848b8c6cf996e06c207cd549b77916c_1681692594881.png"
						alt="">
				</view>

				<!-- <view class="coupon-pick">
					<u-icon name="checkmark-circle" color=" #f26f1e" size="50" v-if="item.bOn"></u-icon>
				</view>

				<view class="list-left-box">
					<img src="https://file.casugn.com/storecompcard//7YwOryJ7Zxp552cdeccbc376c5c904830896d7c92af7_1667195458509.png"
						alt="">
					<view class="left-box">
						<view class="lt-box-t">
							¥ <text class="">{{item.publishValue}}</text>
						</view>
						<view class="lt-box-m">
							{{item.couponTypeValue}}({{item.useType==1?'店铺券':'商品券'}})
						</view>
						<view class="lt-box-b">
							{{item.couponContent}}
						</view>
					</view>
				</view>
				<view class="list-right-box">
					<view class="list-r-title">
						{{item.couponName}}
					</view>
					<view class="list-r-time">
						有效期至{{item.effectiveEnd}}
					</view>
					<view class="list-r-btn">
						<view class="list-to-share">
							<u-button type="primary" size="mini"
								color="linear-gradient(180deg, #fec988 0%, #f26f1e 100%)" text="去分享"
								@tap.stop="toShare(item,index)" v-if="shareDisabled"></u-button>
						</view>
						<view class="list-to-use">
							<u-button type="primary" size="mini"
								color="linear-gradient(180deg, #fec988 0%, #f26f1e 100%)" text="去使用"
								@tap.stop="toUseMethod(item,index)" v-if="shareDisabled"></u-button>
						</view>
					</view>
					<view class="list-r-rule">
						适用规则:{{item.description}}
					</view>
				</view>
			 -->

			</view>
		</view>


		<u-popup :show="popShow" mode="center" closeable="true" :safeAreaInsetBottom="false" @close="close"
			class="pop-show" round="10rpx">

			<view class="pop-box">
				<view class="pop-title">
					请输入店铺账号密码
				</view>
				<u--form labelPosition="left" :model="userInfos" ref="form1">
					<view class="pop-con">
						<u-input v-model="userInfos.name" clearable border="surround" placeholder='账号'>
							<template slot="suffix">
								<view class="suffixIcon flex_center" :class="{'rotate':showHistroy}"
									@tap.stop="tachSuffixIcon">
									<u-icon name="arrow-down" color="#4E5969" size="30"></u-icon>
								</view>
							</template>
						</u-input>
						<scroll-view :scroll-y="true" class="localStoreList" v-show="showHistroy">
							<view class="list-item  nowrap-ellipsis" hover-stay-time="300" @tap="selectHistroy(item)"
								v-for="(item,index) in historyList" :key="index">
								{{item}}
							</view>
						</scroll-view>

					</view>
					<view class="pop-con">
						<u--input v-model="userInfos.password" type='password' clearable border="surround"
							placeholder='密码'></u--input>
					</view>
					<view class="pop-con" style="margin: 40rpx 0;">
						<u-checkbox-group>
							<u-checkbox :checked="userInfos.isRemember" iconSize="32rpx" size="32rpx" labelSize="28rpx"
								shape="circle" labelColor="#4E5969" label="记住密码" @change="changeCheck"></u-checkbox>
						</u-checkbox-group>
					</view>
				</u--form>
				<view class="pop-submit">
					<view class="pop-confirm">
						<u-button @click="synSubmit" type="primary">确认</u-button>
					</view>
					<!-- <view class="pop-cancle">
						<u-button @click="popShow=false" color="#C7C7C7" type="error">取消</u-button>
					</view> -->


				</view>
			</view>
		</u-popup>

		<u-popup :show="shareBottom" mode="bottom" :safeAreaInsetBottom="false" closeable="true" @close="shareClose">
			<view class="share-title">
				分享
			</view>
			<u-scroll-list v-if="friendListShow">
				<view v-for="(item, index) in friendList" class="friend-box" :key="index"
					@click="friendShareClick(item,index)">
					<img v-if="friendActiveIndex==index" class="friend-select"
						src="https://file.casugn.com/storecompcard//6VR4vvr9QWxV7aff1130782a2d1c2041b500f74dedc6_1660206503764.png"
						alt="">
					<view class="friend-head-box">
						<view class="friend-head-mask" v-if="friendActiveIndex==index"></view>
						<img :src="item.chatHead" class="friend-head"></img>
					</view>
					<view class="firend-name">
						{{item.name}}
					</view>
				</view>
			</u-scroll-list>
			<view class="share-bottom">

				<view class="share-bottom-warp">
					<view class="share-send" v-if="!friendSelectShow">
						<u-button color="#fe3030" text="发送" @click="sendText"></u-button>
					</view>
					<view class="share-bottom-box" @click="shareToFriend" v-if="friendSelectShow">
						<view class="share-bottom-wrap">
							<view class="share-bottom-img-box share-bottom-img-box1">
								<img src="https://file.casugn.com/storecompcard//40JbY2nn1Yee0003816de3c71e1e6473f8b7d01b0ccf_1658829712018.png"
									alt="">
							</view>
							<view class="share-bottom-text">
								好友
							</view>
						</view>
					</view>
					<view class="share-bottom-box" v-if="friendSelectShow">
						<view class="share-bottom-wrap" @click="shareToCard">
							<view class="share-bottom-img-box share-bottom-img-box2">
								<img src="https://file.casugn.com/storecompcard//vs96iavFqbma23f173f64506cae24eeb49de67bbdc3b_1658829742783.png"
									alt="">
							</view>
							<view class="share-bottom-text">
								卡片
							</view>
						</view>
					</view>

				</view>

			</view>
		</u-popup>





	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			...mapState(['userInfo', 'otherUserInfo', 'isSelf']),
		},
		data() {
			return {
				filterIndex: 1,
				friendListShow: false,
				friendList: [],
				friendActiveIndex: '-1',
				friendSelectShow: true,
				friendSelectInfo: {},
				shareWXShow: false, //分享到微信显示隐藏
				showHistroy: false, //显示历史输入优惠券
				isHistroy: false, //显示历史输入优惠券
				shareWx: {
					width: "200upx"
				},
				userInfos: {
					name: '',
					password: '',
					isRemember: true
				},

				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				unionId: '',
				openId: '',
				statusMenuLists: [{
					name: '未使用',
					id: 1,
				}, {
					name: '已使用',
					id: 2,
				}, {
					name: '已失效',
					id: 3,
				}, ],
				typeValue: '1',
				listInfo: [],
				popShow: false,
				selectAllCouponCode: [],
				shareShow: false,
				shareBottom: false,
				shareDisabled: true,
				shareStatus: false,
				toUse: false, //去使用
				isMyself: false,
				firstLoad: false, //初次加载
				shareJson: {
					showInfo: {}, //展示的信息
					jumpInfo: {}, //跳转优品会携带的信息
				}, //分享优惠券的信息
				goodIdsArr: [], //分享商品到微信得goodIds
				goodsImage: '', //分享得图片
				endUnionId: '',
				storeId: '',
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				total: 0,
				historyList: [], //历史账号
				// customStyle: {
				// 	color: 'red',
				// }
			}
		},
		watch: {
			'userInfos.name': {
				handler(nVal) {
					if (this.isHistroy) this.isHistroy = false
				}
			},
			'userInfos.password': {
				handler(nVal) {
					if (this.isHistroy) this.isHistroy = false
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onLoad(options) {
			wx.hideShareMenu()
		},
		onShow(options) {
			this.isMyself = this.$store.state.isSelf
			if (this.isMyself) {
				this.toUse = false
			} else {
				this.toUse = true
			}
			let openId = uni.getStorageSync('openId')
			console.log("这是openId", openId)
			this.unionId = openId.unionid
			this.openId = openId.openid



			console.log("分享状态", uni.getStorageSync('sceneStatus'));
			let status = uni.getStorageSync('sceneStatus')
			// if(status==)
			// let $this = this
			// //判断是否由分享进入
			if (status == 1007 || status == 1008 || status == 1044 || status == 1047) {
				this.shareDisabled = false
				this.shareStatus = false
			} else {
				this.shareDisabled = true
				this.shareStatus = true
			}
			this.getCouponLists()
			this.listRememberedUsername()
			this.listInfo.map(function(value) {
				value.bOn = false
			})

		},
		onReachBottom() {
			if (this.firstLoad && (this.total == this.listInfo.length)) return this.$showToast('已全部加载')
			this.getCouponLists('more')
		},
		methods: {
			changeCheck(e) {
				this.userInfos.isRemember = e
			},
			//选中的历史点券账号
			selectHistroy(item) {
				this.userInfos.name = item || ''
				this.userInfos.password = '******'
				this.showHistroy = false
				//从历史中选择账号不传password
				this.$nextTick(() => {
					this.isHistroy = true
				})
			},
			tachSuffixIcon() {
				if (!this.historyList.length) return
				this.showHistroy = !this.showHistroy
			},
			//获取历史领券账号
			listRememberedUsername() {
				this.$api.listRememberedUsername({
					unionId: this.unionId
				}).then(res => {
					if (res.success) {
						this.historyList = res.result || []
						console.log(this.historyList, 'this.historyList')
					}
				})
			},
			// 去创建优惠券
			toCreateCoupon() {
				uni.navigateTo({
					url: '/pagesBusiness/createCoupon/createCoupon'
				})
			},
			// 分享优惠券点击
			shareClick() {
				this.shareBottom = true
			},
			// 分享到好友
			shareToFriend() {
				this.friendListShow = true
				this.querySingleChatList()
			},
			// 选取指定好友分享点击事件
			friendShareClick(item, index) {
				console.log('分享到好友')
				console.log(item, index)
				this.endUnionId = item.unionId

				this.friendSelectInfo = item
				this.friendActiveIndex = this.friendActiveIndex == index ? -1 : index
				if (this.friendActiveIndex == -1) {
					// 判断是否选中，false是未选中，true是选中
					this.friendSelectShow = true
				} else {
					this.friendSelectShow = false
				}
			},

			//查询单聊列表
			async querySingleChatList() {

				let payload = {
					pageNo: 1,
					pageSize: 100,
					openId: this.openId,
					type: 1
				}
				let res = await this.$api.queryRobCouponVoucher(payload)
				if (res.success) {
					// item.roomIcon =[]
					console.log("测试测试", res.result.records)
					if (res.result.records.length > 0) {
						this.friendList = res.result.records
						// .map(item => {
						// 	if(item.frendHead){
						// 		item.roomIcon = JSON.parse(item.frendHead)
						// 	}else{
						// 		item.roomIcon =["https://file.casugn.com/storecompcard//IncVZiU5gYsE01703be286353546682413b217acc8be_1660102753385.png"]
						// 	}
						// 	return item
						// })
					} else {

					}
					console.log(this.singleChatList, '查询单聊列表');
				} else {
					this.singleChatList = []
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			// 确认发送 优惠券到聊天
			async sendText() {
				// this.hideDrawer(); //隐藏抽屉
				// if (!this.textMsg) {
				// 	return;
				// }
				// var nowDate = new Date();
				let userAvatar = uni.getStorageSync('_userInfo')
				this.shareJson.showInfo = {
					imgUrl: this.goodsImage,
					fromName: userAvatar.name,
				}
				this.shareJson.jumpInfo = {
					jumpImg: this.goodsImage,
					goodsIds: this.goodIdsArr.toString(),
					storeId: this.storeId,
				}
				console.log("传递得消息")
				console.log(this.shareJson)
				let payload = {
					roomId: this.friendSelectInfo.id,
					openId: this.openId,
					headUrl: this.chatHead,
					//修改nickname后使用nickname否则使用原有
					nickname: userAvatar.name,
					format: 4,
					content: JSON.stringify(this.shareJson),
				}

				let data = {
					couponCodes: this.selectAllCouponCode.toString(),
					fromUnionId: this.unionId,
					endUnionId: this.endUnionId
				}
				this.$api.shareCoupon(data.couponCodes, data.fromUnionId, data.endUnionId).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});

						this.$api.sendMessage(payload).then(res => {
							if (res.success) {
								uni.showToast({
									title: "分享成功",
									icon: 'none'
								});
								this.shareBottom = false
								this.friendSelectInfo = {}
								this.friendList = []
								this.friendSelectShow = true
								this.friendListShow = false
								this.friendActiveIndex = '-1'
								this.shareWXShow = true
								this.getCouponLists()

							} else {
								uni.showToast({
									title: "分享失败",
									icon: 'none'
								});
							}
						})

					}
				})




			},

			// 分享到微信窗口关闭
			closeShareWX() {
				this.shareWXShow = false
			},


			// 分享优惠券到卡片
			shareToCard() {
				let a = this.selectAllCouponCode.toString()
				console.log(a)
				let data = {
					couponCodes: a,
					fromUnionId: this.unionId
				}
				uni.setStorageSync('couponUserListsInfo', JSON.stringify(data))
				uni.navigateTo({
					url: '/pagesBusiness/coupon/couponUserList'
				})
			},
			// 分享优惠券到微信
			onShareAppMessage(res) {
				console.log("分享优惠券")
				// console.log(this.userInfo)
				console.log(res)
				let userAvatar = uni.getStorageSync('_userInfo')
				let ids = this.goodIdsArr.toString()
				console.log("微信分享的id")
				console.log(ids)

				if (res.from === 'button') { // 来自页面内分享按钮
					console.log('来自页面内分享按钮');
					// if (!this.userInfo.id) {
					// 	uni.showToast({
					// 		title: '请先创建名片',
					// 		icon: 'none'	
					// 	});
					// 	return
					// }
					// + "&fromUnionId=" + this.unionId,
					if (ids) {
						return {
							title: userAvatar.name + `分享给你了商品优惠券！点击查看吧！`,
							path: '/pagesBusiness/goodsList/goodsList?goodIds=' + ids,
							imageUrl: this.goodsImage,
							success(res) { // 分享成功回调
								console.log(" 分享成功回调", res)
								this.$uniApi.showTips('分享成功', 'success')
							}
						}
					} else {
						return {
							title: userAvatar.name + `分享给你了商品优惠券！点击查看吧！`,
							path: '/pagesBusiness/goodsList/goodsList?storeId=' + this.storeId,
							imageUrl: this.goodsImage,
							success(res) { // 分享成功回调
								console.log(" 分享成功回调", res)
								this.$uniApi.showTips('分享成功', 'success')
							}
						}
					}

				} else {
					// if (!this.userInfo.id) {
					// 	uni.showToast({
					// 		title: '请先创建名片',
					// 		icon: 'none'
					// 	});
					// 	return
					// }
					// return {
					// 	title: `我是${this.userInfo.company?this.userInfo.company:''}的${this.userInfo.name?this.userInfo.name:''},这是我的拜帖,敬请惠存!`,
					// 	path: '/pages/card/card?cardId=' + this.userInfo.id
					// }
				}

			},
			// 同步优惠券
			synClick() {
				this.popShow = true
			},
			// 同步优惠券提交
			synSubmit() {
				if (!this.userInfos.name) {
					return this.$showToast('请输入店铺账号')
				} else if (!this.userInfos.password) {
					return this.$showToast('请输入店铺密码')
				}
				let data = {
					...this.userInfos,
					username: this.userInfos.name,
					fromUnionId: this.unionId,
				}
				if (this.isHistroy) delete data.password
				this.$api.synMyCoupon(data).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: res.result,
							icon: 'none'
						});
						this.popShow = false
						this.getCouponLists()
						this.listRememberedUsername()
					} else {
						this.popShow = true
						this.userInfos.name = ''
						this.userInfos.password = ''
						uni.showToast({
							title: "信息输入错误，请重试！",
							icon: 'none'
						});
					}
				})
			},

			// 状态切换点击
			statusMenuClick(item) {
				console.log(item)
				this.filterIndex = item;
				this.typeValue = item
				if (this.shareStatus) {
					if (this.typeValue == 1) {
						// 如果是未使用
						this.shareDisabled = true
						this.shareShow = false
					} else {
						// 已使用和已过期都不能分享
						this.shareDisabled = false
						this.shareShow = false
					}
					this.getCouponLists()
				} else {
					this.shareDisabled = false
					this.shareShow = false
					this.getCouponLists()
				}

			},
			//获取优惠券
			getCouponLists(more) {
				uni.showLoading({
					title: '加载中'
				})
				this.queryParams.pageNo = more ? ++this.queryParams.pageNo : 1
				let data = {
					...this.queryParams,
					useState: this.typeValue,
					unionId: this.unionId
				}
				if (this.typeValue == 1) {
					// 如果是未使用
					this.shareDisabled = true
					this.shareShow = false
				} else {
					// 已使用和已过期都不能分享
					this.shareDisabled = false
					this.shareShow = false
				}
				this.$api.getCouponList(data).then(res => {
					if (res.success) {
						let arr = res.result.records
						this.listInfo = more ? this.listInfo.concat(arr) : arr
						this.total = res.result.total
					}
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading()
					}, 400)
					this.firstLoad = true
				})
			},
			toShare(item, index) {
				console.log(item)
				this.storeId = item.storeId
				this.shareBottom = true
				this.shareShow = false
				this.selectAllCouponCode = []
				this.goodIdsArr = []
				let data = {
					couponCodes: item.couponCode,
					fromUnionId: this.unionId
				}
				this.selectAllCouponCode.push(item.couponCode)
				// useType -- 1 是店铺券，--2 是商品券
				if (item.useType == 2) {
					this.goodIdsArr.push(item.goodsIds)
				} else {
					// 如果是店铺券，id为店铺id
					this.goodIdsArr = []
					// this.goodIdsArr.push(item.storeId)
				}

				this.goodsImage = item.goodsImage
				uni.setStorageSync('couponUserListsInfo', JSON.stringify(data))

			},
			// 去使用
			toUseMethod(item, index) {
				console.log("去使用")
				console.log(item, index)
				uni.setStorageSync('yellowCarStatus', 0)
				if (item.goodsIds) {
					uni.navigateTo({
						url: '/pagesBusiness/goodsList/goodsList?goodIds=' + item.goodsIds
					})
				} else {
					uni.navigateTo({
						url: '/pagesBusiness/goodsList/goodsList?storeId=' + item.storeId
					})
				}

				// /pagesBusiness/goodsList/goodsList?goodIds=' + item.goodsIds,
			},

			// 单选多选
			checkCoupon(index, item) {
				if (this.shareStatus) {
					if (this.typeValue == 1) {
						// 如果是未使用
						const temp = this.listInfo[index]
						temp.bOn = !this.listInfo[index].bOn
						this.$set(this.listInfo, index, temp)
						console.log(this.listInfo)
						this.selectAllCouponCode = []
						this.goodIdsArr = []
						this.listInfo.forEach(item => {
							if (item.bOn) {
								this.selectAllCouponCode.push(item.couponCode)
								// this.goodIdsArr.push(item.goodsIds)
								// useType -- 1 是店铺券，--2 是商品券
								if (item.useType == 2) {
									this.goodIdsArr.push(item.goodsIds)
								} else {
									// 如果是店铺券，id为店铺id
									this.goodIdsArr.push(item.storeId)
								}
							}
						})
						console.log(this.selectAllCouponCode)
						if (this.selectAllCouponCode.length == 0) {
							this.shareShow = false
						} else {
							this.shareShow = true
						}
					} else {
						// 已使用和已过期都不能分享
						this.shareShow = false
						this.toUse = false


					}
				} else {
					console.log("分享页进入 禁止分享")
				}


			},

			open(e) {
				// console.log('open', e)
			},
			close(e) {
				console.log('close', e)
				this.popShow = false
				this.userInfos.name = ''
				this.userInfos.password = ''
			},
			change(e) {
				// console.log('change', e)
			},
			shareClose() {
				this.shareBottom = false
				this.friendSelectInfo = {}
				this.friendList = []
				this.friendSelectShow = true
				this.friendListShow = false
				this.friendActiveIndex = '-1'
				// console.log('close');
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F8FA;
	}
</style>
<style lang="scss" scoped>
	.coupon-box {
		position: relative;
		height: calc(100vh - 110upx);

		.navbar {
			position: fixed;
			left: 0;
			top: 0; //暂定为0 
			display: flex;
			width: 100%;
			height: 100upx;
			background: #fff;
			z-index: 10;

			.nav-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 176rpx;
				height: 80upx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1D2129;
				position: relative;

				&.current {
					color: #276AEE;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 48upx;
						height: 0;
						border-bottom: 4upx solid #276AEE;
					}
				}
			}

			.p-box {
				display: flex;
				flex-direction: column;

				.yticon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30upx;
					height: 14upx;
					line-height: 1;
					margin-left: 4upx;
					font-size: 26upx;
					color: #888;

					&.active {
						color: #423BFE;
					}
				}

				.xia {
					transform: scaleY(-1);
				}
			}

			.cate-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 80upx;
				position: relative;
				font-size: 26upx;

				&:after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					border-left: 1px solid #ddd;
					width: 0;
					height: 36upx;
				}
			}
		}


		// 一键分享
		.share-cicle {
			position: fixed;
			width: 120upx;
			height: 120upx;
			// line-height: 120upx;
			text-align: center;
			background: linear-gradient(90deg, #3a3af5 0%, #8888ff 100%);
			border-radius: 50%;
			right: 30upx;
			bottom: 300upx;
			z-index: 10;
			letter-spacing: 5upx;
			color: white;
			font-weight: bold;
			font-size: 24upx;

			.share-img {
				height: 40upx;
				margin-top: 20upx;

				img {
					width: 35upx;
					height: 35upx;
				}
			}

			text {
				margin-top: 10upx;
				font-size: 22upx;
			}

		}

		.add-cicle {
			position: fixed;
			width: 100%;
			height: 160upx;
			text-align: center;
			bottom: 0;
			z-index: 10;
			letter-spacing: 5upx;
			color: white;
			font-weight: bold;
			background: #fff;
			display: flex;

			.add-img {
				// width: 654rpx;
				flex: 1;
				height: 88rpx;
				// background: #276AEE;
				margin: 0 auto;
				margin-top: 16rpx;
				padding: 0 20rpx;
			}


		}

		// 生成券
		.created-box {
			width: 228rpx;
			height: 80rpx;
			background: #276AEE;
			box-shadow: 0rpx 16rpx 32rpx 0rpx rgba(22, 63, 169, 0.4);
			border-radius: 400rpx 0rpx 0rpx 400rpx;
			position: fixed;
			bottom: 258rpx;
			right: 0rpx;
			z-index: 9;
			display: flex;
			justify-content: flex-start;

			.created-cicle {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				background: #FFFFFF;
				text-align: center;
				margin-top: 12rpx;
				margin-left: 12rpx;

				img {
					width: 32rpx;
					height: 32rpx;
					position: relative;
					top: 50%;
					transform: translateY(-18rpx);
				}
			}


			.created-btn {
				width: 140rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 20rpx;
				margin-left: 8rpx;
			}
		}

		// 优惠券列表
		.coupon-list {
			padding: 32rpx;
			padding-bottom: 170rpx;
			margin-top: 100rpx;

			// 暂无优惠券
			.no-coupon {
				width: 240rpx;
				height: 296rpx;
				margin: 0 auto;
				margin-top: 240rpx;

				img {
					width: 240rpx;
					height: 240rpx;
				}

				.no-coupon-name {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #86909C;
					line-height: 39rpx;
					margin-top: 16rpx;
					text-align: center;
				}
			}

			// 单个优惠券box
			.list-box {
				overflow: hidden;
				width: 686rpx;
				height: 256rpx;
				background: #FFFFFF;
				position: relative;
				// padding: 20rpx 24rpx;
				margin-bottom: 24rpx;

				// 上半部分
				.list-top {
					display: flex;
					margin-left: 24rpx;
					margin-top: 20rpx;

					// 左边钱
					.list-money {
						position: relative;
						top: -18rpx;

						.lt-box-t {
							margin-top: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F53F3F;
							line-height: 67rpx;
							vertical-align: middle;

							text {
								font-size: 48rpx;
								font-family: PingFang SC-Semibold, PingFang SC;
								font-weight: 600;
								color: #F53F3F;
							}
						}

						.lt-box-m {
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F53F3F;
							margin-top: 8rpx;
							text-align: center;
						}
					}

					// 中间文字
					.list-md {
						margin-left: 24rpx;

						.list-md-title {
							font-size: 28rpx;
							font-family: PingFang SC-Semibold, PingFang SC;
							font-weight: 600;
							color: #1D2129;
							line-height: 39rpx;
							max-width: 360rpx;
						}

						.list-md-content {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #86909C;
							line-height: 34rpx;
							margin-top: 16rpx;
						}

						.list-md-date {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #86909C;
							line-height: 34rpx;
							margin-top: 16rpx;
						}
					}
				}

				// 中间线部分
				.list-line {
					width: 638rpx;
					height: 0rpx;
					opacity: 1;
					border: 2rpx dashed #E5E6EB;
					margin-top: 24rpx;
					margin-left: 24rpx;
				}

				// 使用规则
				.list-bottom {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4E5969;
					margin-top: 18rpx;
					margin-left: 24rpx;
				}

				// 去分享 去使用
				.list-r-btn {
					width: 136rpx;
					position: absolute;
					top: 30rpx;
					right: 24rpx;

					.list-to-use {
						margin-top: 24rpx;
					}
				}

				.list-r-used {
					position: absolute;
					width: 160rpx;
					height: 160rpx;
					top: 0;
					right: 0;

					img {
						width: 160rpx;
						height: 160rpx;
					}
				}


				.coupon-pick {
					position: absolute;
					top: 72upx;
					right: 26upx;
				}

			}

		}

		// 弹出框
		.pop-box {
			padding: 50upx;
			border-radius: 8upx;
			position: relative;

			.pop-title {
				height: 48rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #1D2129;
				line-height: 48rpx;
				text-align: center;
			}

			.pop-con {
				margin-top: 24upx;
				position: relative;

				.suffixIcon {
					width: 72rpx;
					height: 40rpx;


				}

				.rotate {
					transition: all .2s ease-in-out;
					transform: rotate(180deg);
				}

				.localStoreList {
					position: absolute;
					box-sizing: border-box;
					top: 36px;
					width: calc(20rpx + 100%);
					padding: 8rpx 12rpx;
					background-color: #f8f8f8;
					z-index: 10;
					max-height: 280rpx;
					left: -10rpx;

					.list-item {
						width: 100%;
						color: #4E5969;
						font-size: 30rpx;
						padding: 0 12rpx;
						height: 80rpx;
						line-height: 80rpx;
						margin-bottom: 10rpx;
						background-color: #fff;
						border-radius: 6rpx;

						&:active {
							background-color: #f2f2f2;
						}
					}
				}
			}

			.pop-submit {
				// display: flex;
				// justify-content: space-around;
				margin-top: 24upx;

				.pop-confirm {
					width: 558rpx;
					height: 72rpx;
				}

				// .pop-cancle {
				// 	width: 200upx;
				// 	margin-left: 20upx;
				// }
			}
		}

		.friend-box {
			margin-top: 20upx;
			text-align: center;
			margin-left: 20upx;
			position: relative;

			.friend-select {
				position: absolute;
				right: 10upx;
				bottom: 30upx;
				width: 40upx;
				height: 40upx;
				z-index: 20;
			}

			.friend-head-box {
				margin: 0 auto;
				position: relative;
				width: 80upx;
				height: 80upx;

				// background: red;
				.friend-head-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 80upx;
					height: 80upx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					z-index: 10;
				}

				.friend-head {
					width: 80upx;
					height: 80upx;
					// margin-left: 20upx;
					border-radius: 50%;
				}
			}

			.firend-name {
				font-size: 20upx;
				text-align: center;
				// background: red;
				width: 100upx;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				overflow-wrap: break-word; //强制换行
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2; //超出多少行数显示省略号
			}
		}

		// 分享弹出框
		.share-title {
			width: 100%;
			height: 108rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1D2129;
			line-height: 108rpx;
			text-align: center;
		}

		.share-bottom {
			height: 236rpx;



			.share-bottom-warp {
				display: flex;
				justify-content: space-around;
				width: 686rpx;
				margin: 0 auto;
				// margin-top: 32rpx;


				.share-send {
					width: 300upx;
					background: yellowgreen;
				}

				.share-bottom-box {
					.share-bottom-wrap {
						// background: red;
						text-align: center;

						.share-bottom-img-box {
							background: red;
							width: 96upx;
							height: 96upx;
							text-align: center;
							border-radius: 50%;
							position: relative;

							// background: red;
							img {
								width: 60upx;
								height: 60upx;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translateX(-30upx) translateY(-30upx);
							}
						}

						.share-bottom-img-box2 {
							img {
								width: 50upx;
								height: 50upx;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translateX(-25upx) translateY(-25upx);
							}
						}

						.share-bottom-text {
							font-size: 32rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #1D2129;
							line-height: 45rpx;
							margin-top: 24rpx;

							.shareBtn {
								padding: 0;
								font-size: 26upx;
								font-weight: 600;
								font-size: #5d5d5d;
								line-height: 50upx;
								border-radius: 0;
								background: white;
							}

							.shareBtn::after {
								border: none !important;
							}
						}

						.share-bottom-img-box1 {
							background: #fe3030;
						}

						.share-bottom-img-box2 {
							background: #1574ef;
						}

						.share-bottom-img-box3 {
							background: rgb(0, 211, 162);
						}

					}
				}
			}

		}

		// 分享到微信
		.share-wx {
			position: fixed;
			background: white;
			box-shadow: 0px 0px 9px 1px rgba(92, 87, 254, 0.2);
			top: 50%;
			left: 50%;
			z-index: 20;
			transform: translateX(-230upx) translateY(-150upx);
			border-radius: 50upx;
			width: 400upx;
			height: 300upx;
			padding: 50upx;

			.share-wx-close {
				width: 50upx;
				height: 50upx;
				position: absolute;
				top: 30upx;
				right: 30upx;
			}

			.share-img {
				width: 200upx;
				height: 200upx;
				// background: #1574ef;
				border-radius: 20upx;
				margin: 0 auto;
				margin-top: 30upx;

				img {
					width: 200upx;
					height: 200upx;
				}
			}

			.share-send {
				width: 250upx;
				margin: 0 auto;
				// background: yellowgreen;
				margin-top: 20upx;

				.shareBtn {
					display: flex;
					justify-content: space-around;
					padding: 0;
					font-size: 26upx;
					font-weight: 600;
					// font-size: #5d5d5d;
					color: white;
					line-height: 80upx;
					border-radius: 0;
					background: rgb(7, 193, 96);
					border-radius: 5upx;
					height: 80upx;

					img {
						width: 60upx;
						height: 60upx;
						position: relative;
						top: 10upx;
					}
				}

				.shareBtn::after {
					border: none !important;
				}
			}

			// display: flex; 
			// justify-content: space-around;
		}

	}
</style>